<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" name="viewport"/>
		<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>上传</title>
		<!-- 引用控制层插件样式 -->
		<link rel="stylesheet" href="/Public/tools/php_img_upload/control/css/zyUpload.css" type="text/css">
		
		<!--图片弹出层样式 必要样式-->
		<script type="text/javascript" src="/Public/tools/php_img_upload/jquery-1.7.2.js"></script>
		<!-- 引用核心层插件 -->
		<script type="text/javascript" src="/Public/tools/php_img_upload/core/zyFile.js"></script>
		<!-- 引用控制层插件 -->
		<script type="text/javascript" src="/Public/tools/php_img_upload/control/js/zyUpload.js"></script>
		<!-- 引用初始化JS -->
		
	</head>
	<body>
		<h1 style="text-align:center;">图片上传</h1>
	    <div id="demo" class="demo"></div>   
	    <div id="successinfo">
	    
	    </div>
	    <script>
			var photo_id =<{$id}>;
			$(function(){
			// 初始化插件
			var width = $(window).width();
			if ( width >= 650 )	 width = '750px';
			else 	width = "100%";

			$("#demo").zyUpload({
				width            :   width,                 // 宽度
				height           :   "auto",                 // 宽度
				itemWidth        :   "140px",                 // 文件项的宽度
				itemHeight       :   "100px",                 // 文件项的高度
				//url              :   "/upload/UploadAction",  // 上传文件的路径
				url              :   "/Admin/Photo/imgUpload?id="+photo_id,
				inputName		 : 	'_img',
				id 				 :	 1,
				multiple         :   true,                    // 是否可以多个文件上传
				dragDrop         :   false,                    // 是否可以拖动上传文件
				del              :   true,                    // 是否可以删除文件
				finishDel        :   false,  				  // 是否在上传文件完成后删除预览
				/* 外部获得的回调接口 */
				onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
					console.info("当前选择了以下文件：");
					console.info(selectFiles);
				},
				onProgress: function(file, loaded, total){    // 正在上传的进度的回调方法
					var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
					eleProgress.html(percent);
					console.info(file.index);
					console.info("当前正在上传此文件：");
					console.info(file.name);
					console.info("进度等信息如下：");
					console.info(loaded);
					console.info(total);
				},   
				onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
					console.info("当前删除了此文件：");
					console.info(file.name);
				},
				onSuccess: function(file, response){          // 文件上传成功的回调方法
					console.info("此文件上传成功：");
					$('#successinfo').append("<p>"+response+"</p>");
					console.info(response);
				},
				onFailure: function(file, response){          // 文件上传失败的回调方法
					$("#uploadImage_" + file.index).css("opacity", 0.2);
					console.info("此文件上传失败：");
					console.info(file.name);
				},
				onComplete: function(response){           	  // 上传完成的回调方法
					console.info("文件上传完成");
					console.info(response);
				}
			});
			
		});


			
	    </script>
	</body>
</html>







